<template>
  <!-- 查询条件：时间维度 -->
  <el-form style="text-align: left;display: flex;;">
    <!-- 快速时间选择 -->
    <el-form-item >
      <el-radio-group v-model="quickTime" @change="handleQuickTime">
        <el-radio-button label="today">今天</el-radio-button>
        <!-- <el-radio-button label="yesterday">昨天</el-radio-button> -->
        <el-radio-button label="week">本周</el-radio-button>
        <el-radio-button label="month">本月</el-radio-button>
        <el-radio-button label="quarter">本季度</el-radio-button>
        <el-radio-button label="year">今年</el-radio-button>
        <el-radio-button label="lastWeek">上周</el-radio-button>
        <el-radio-button label="lastMonth">上月</el-radio-button>
        <el-radio-button label="lastQuarter">上个季度</el-radio-button>
        <el-radio-button label="lastYear">去年</el-radio-button>
        <el-radio-button label="custom">时间段</el-radio-button>
      </el-radio-group>
    </el-form-item>

    <!-- 自定义时间段 -->
    <el-form-item v-if="quickTime === 'custom'" label="时间范围" class="ml-8">
      <el-date-picker
        v-model="dateRange"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="YYYY-MM-DD"
        @change="handleDateRange"
      />
    </el-form-item>
  </el-form>
  <div>
    <Finance :label="quickTime" :dateRange="dateRange"  />
  </div>
</template>
<script setup>
import { ref } from "vue";
import Finance from "./components/Finance.vue";

const quickTime = ref("week");
const dateRange = ref([]);
// 处理快速时间选择
const handleQuickTime = (val) => {
  if (val === "custom") {
    dateRange.value = [new Date().toISOString().substring(0, 10), new Date().toISOString().substring(0, 10)];
   
  }
  
};

</script>
